<script>
import { Toast } from 'vant';

export default {
  name: 'back',
  data() {
    return {
      value: '',
      fileList: [],
      image:require('./image/icon.png')
    };
  },
  methods: {
    afterRead(file) {
      this.fileList.push({ url: file.content });
    },
    backSubmit() {
      console.log('backSubmit');
    Toast({
      message: '提交成功',
      icon:require('../index/image/success.png'),
    });
    }
  }
};
</script>

<template>
  <frame-view class="index" navBarBgColor="#fff">
    <div>
    <p style="margin-left: 28px;font-size: 30px;"><span style="color: #FF0000">*</span><span style="margin-left: 10px">问题反馈</span></p>
      <van-field
        class="diyTextarea"
        style="width: 100%;height: 300px;margin-top: 10px"
        v-model="value"
        type="textarea"
        placeholder="请描述您遇到的问题，以帮助壹商通更好的改进。"
        autosize
        show-word-limit
        maxlength="400"
      />
      <van-uploader style="margin-left: 28px;margin-top: 40px" :upload-icon="image" :after-read="afterRead" />

    </div>
    <van-button style="margin-left: 28px;margin-top:60px;width: 650px;height: 80px" :disabled="!value" round block type="info"
                @click="backSubmit"
                native-type="submit">提交
    </van-button>
  </frame-view>

</template>

<style scoped lang="scss">
.index{
  background-color: #Fff;
}
.diyTextarea{
  :deep(textarea){
    height: 200px !important;
    &::placeholder{
      font-size: 28px;
      color: #BBBBBB;
    }
  }
  :deep(.van-cell__value) {
    background-color: #f7f7f7;
    border: none;
  }
  :deep(.van-field__word-limit){
    color: #BBBBBB;
  }
}
:deep(.van-icon__image){
  width:100% !important;
  height:100% !important;
}
</style>
